<template>
    <div class="progress-bar">
        <div class="progress-item" :style="{ width: progress+'%' }">
            <MmvImage class="progress-icon" src="01Loading页/钢笔.png"></MmvImage>
            <span class="progress-num">{{ progress }}%</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProgressBar',
    props: {
        progress: {
            type: Number,
            default: 0,
        },
    },
};
</script>

<style lang="scss" scoped>
.progress-bar {
    width: 80vw;
    height: 5px;
    border: 1px solid rgb(165, 2, 3);
    border-radius: 30px;
    position: relative;
    .progress-item {
        width: 50%;
        height: 100%;
        background-color: rgb(165, 2, 3);
        border-radius: 30px;
        text-align: right;
    }
    .progress-icon {
        position: absolute;
        bottom: 10px;
    }
    .progress-num {
        position: relative;
        top: 10px;
        font-size: 14px;
        font-weight: bolder;
    }
}
</style>
